<template>
	<view class="browse">
		<!-- 浏览区部分 -->
		<view class="browsebox">
			<!-- <navigator url="/pages/navPage/navPage" class="box" v-for="item in 5">
				<image src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFxnP5gl5k0l_OWGMfAfprXNrPsxrme3vk4A&s" mode="aspectFill"></image>
				<view class="text">谁能帮帮我拿快递啊~ </view>
				<view class="userinfo">
					<image class="usrimg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTTREs8xjjeSDboZon7rhzR9nPDUU_1-__XJPlmrvRa-pV8tOE3XvbupmOaoA&s" mode="aspectFill"></image>
					<view class="username">爱吃香菜的肉包</view>
				</view>
			</navigator> -->
			<!-- 第一个 -->
			
			<navigator v-if="((isShow==0||isShow==1)&&props.box==0)||(isShow==0&&(props.box==0||props.box==1))"
			:url="'/pages/comunityNavPage/comunityNavPage?userimg='+encodeURIComponent(usrimg1)+'&username='+encodeURIComponent(username1)" class="box" >
				<image src="/common/Otherimages/c1.jpg" mode="aspectFill"></image>
				<view class="text">第一探店之王，吃吃吃~</view>
				<view class="userinfo">
					<image class="usrimg" src="/common/usrimg/11.jpg" mode="aspectFill"></image>
					<view class="username">小杜小杜最乖</view>
				</view>
			</navigator>
			<!-- 第2个 -->
			<navigator v-if="((isShow==0||isShow==2)&&props.box==0)||(isShow==0&&(props.box==0||props.box==1))"
			:url="`/pages/comunityNavPage/comunityNavPage?usrimg=${usrimg2}&username=${username2}`" class="box" >
				<image src="/common/Otherimages/c21.jpg" mode="aspectFill"></image>
				<view class="text">这个无人机配送好好玩</view>
				<view class="userinfo">
					<image class="usrimg" src="/common/usrimg/14.jpg" mode="aspectFill"></image>
					<view class="username">爱吃香菜的肉包</view>
				</view>
			</navigator>  
			<!-- 第3个 -->
			<navigator v-if="((isShow==0||isShow==3)&&props.box==0)||(isShow==0&&(props.box==0||props.box==2))"
			:url="`/pages/comunityNavPage/comunityNavPage?usrimg=${usrimg3}&username=${username3}`" class="box" >
				<image src="/common/Otherimages/c6.jpg" mode="aspectFill"></image>
				<view class="text">师姐，这招叫做一剑霜寒十四州</view>
				<view class="userinfo">
					<image class="usrimg" src="/common/usrimg/67.jpg" mode="aspectFill"></image>
					<view class="username">你就是我的小豆包</view>
				</view>
			</navigator>
			<!-- 第4个 -->
			<navigator v-if="((isShow==0||isShow==4)&&props.box==0)||(isShow==0&&(props.box==0||props.box==3))"
			:url="`/pages/comunityNavPage/comunityNavPage?usrimg=${usrimg4}&username=${username4}`" class="box" >
				<image src="/common/Otherimages/c12.jpg" mode="aspectFill"></image>
				<view class="text">公司团建耶耶耶</view>
				<view class="userinfo">
					<image class="usrimg" src="/common/usrimg/55.jpg" mode="aspectFill"></image>
					<view class="username">可惜不是你</view>
				</view>
			</navigator>
			<!-- 第5个 -->
			<navigator v-if="((isShow==0||isShow==1)&&props.box==5)||(isShow==0&&(props.box==0||props.box==3))"
			:url="`/pages/navPage/navPage?usrimg=${usrimg4}&username=${username4}`" class="box" >
				<image src="/common/Otherimages/c18.jpg" mode="aspectFill"></image>
				<view class="text">看到快递小哥送快递好辛苦</view>
				<view class="userinfo">
					<image class="usrimg" src="/common/usrimg/images.jpg" mode="aspectFill"></image>
					<view class="username">小菜不可以</view>
				</view>
			</navigator>
			<!-- 第6个 -->
			<navigator v-if="((isShow==0||isShow==6)&&props.box==0)||(isShow==0&&(props.box==0||props.box==4))"
			:url="`/pages/comunityNavPage/comunityNavPage?usrimg=${usrimg4}&username=${username4}`" class="box" >
				<image src="/common/Otherimages/c19.jpg" mode="aspectFill"></image>
				<view class="text">自己做的蛋糕</view>
				<view class="userinfo">
					<image class="usrimg" src="/common/usrimg/67.jpg" mode="aspectFill"></image>
					<view class="username">人生不过如此</view>
				</view>
			</navigator>
			
			
			
			<!-- 刷新和返回顶部按钮 -->
			<view class="float">
				<view class="item" @click="refresh">刷新</view>
				<view class="item" @click="toTop">顶部</view>
			</view>
		</view>
		<!-- <view clas="tab">5分钟前更新</view> -->
	</view>
</template>

<script setup>
import {computed, ref,watchEffect} from 'vue'
import {onReachBottom,onPullDownRefresh} from '@dcloudio/uni-app'
// 定义用户图片
const usrimg1="https://a.520gexing.com/uploads/allimg/2023092609/x1cry0jfh3n.jpg"
const usrimg2="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTTREs8xjjeSDboZon7rhzR9nPDUU_1-__XJPlmrvRa-pV8tOE3XvbupmOaoA&s"
const usrimg3="https://p1.itc.cn/q_70/images03/20230427/97e4cf398c1c453f98f8135b202479d6.jpeg"
const usrimg4="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTthvwEiyYPgatT7BPZajLIzQAwgfvrYcUOuJmlDqfVtg&s"
const username1="小杜小杜最乖"
const username2="爱吃香菜的肉包"
const username3="你就是我的小豆包"
const username4="可惜不是你"
const username5="小菜不可以"
const username6="人生不过如此"
const text1="第一探店之王，吃吃吃~"
const text2="这个无人机配送好好玩"
const text3="师姐，这招叫做一剑霜寒十四州"
const text4="公司团建耶耶耶"
const text5="看到快递小哥送快递好辛苦"
const text6="自己做的蛋糕"
// 定义是否显示这个值
const isShow=ref(0);
const mask=ref(1000)

// 接收父元素传过来的搜索值
const props=defineProps({
	searchValue:{
		type:String,
		default:''
	},
	box:{
		type:Number,
		default:0
	}
})
console.log("props.searchValue1",props.searchValue)
// 完成搜索判断
function Search(){
	
	// 先进行数组赋值
	let searchArr=[
		{username: username1, text: text1},
		{username: username2, text: text2},
		{username: username3, text: text3},
		{username: username4, text: text4},
		{username: username5, text: text5},
		{username: username6, text: text6}
	]
	console.log("props.searchValue",props.searchValue)
	// 如果searchValue是空值说明不展开搜索
	if(props.searchValue==''){
		isShow.value=0;
		// uni.showToast({
		// 	title:`${props.searchValue}`,
		// 	icon:"none"
		// })
	}
	// 如果不为空,进行搜索，判断searchValue的是否在username以及text中，如果是那么就将其用v-if显示赋值
	if(props.searchValue != ''){
		// uni.showToast({
		// 	title:`${props.searchValue}`,
		// 	icon:"none"
		// })
		// 判断是否在其中
		for(let i=0; i<searchArr.length; ++i){
			if (searchArr[i].username.includes(props.searchValue) || searchArr[i].text.includes(props.searchValue)){
				// 这里可以添加您想要执行的操作
				isShow.value=i+1;
				mask.value=i+1
			
			}
			
		}
		// 如果查询不到，那么就不显示
		if(mask.value==1000){
			isShow.value=mask.value
			uni.showToast({
				title:`搜索不到`,
				icon:"none"
			})
		}
		
	}
}
// 添加监听
watchEffect(() => {
   if (props.searchValue.value !== '') {
     Search();
   }
});

// 实现刷新按钮功能
const refresh=()=>{
	uni.startPullDownRefresh();
	// 实现下拉刷新后隐藏刷新
	uni.stopPullDownRefresh()
}
// 实现顶部按钮
const toTop=()=>{
	uni.pageScrollTo({
		scrollTop:0,
		duration:100
		
	})
}
</script>

<style lang="scss" scoped>
.browse{
	.browsebox{
		padding:5rpx 70rpx;
		display:grid;
		grid-template-columns: repeat(2,1fr);
		grid-gap: 40rpx; /* 在两列之间添加间距 */
		// border:1rpx solid #000;
		// padding:30rpx; 
		.box{
			// position:relative;
			display:grid;
			grid-template-rows:60% 20% auto;
			
			// gap:10rpx;
			width: 280rpx;
			// height: 440rpx;
			height: 448rpx;
			border-radius: 30rpx;
			// background-color: rgba(0,0,0,0.5);
			box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
			image{
				width:100%;
				height:100%;
				border-radius: 30rpx;
			}
			.text{
				padding:10rpx;
				color: #000;
				// text-align: center;
				font-family: "Noto Sans SC";
				font-size: 25rpx;
				font-style: normal;
				font-weight: 400;
				line-height: normal;
			}
			.userinfo{
				padding:10rpx;
				display:grid;
				grid-template-columns: 25% auto;				
				// 用户头像
				.usrimg{
					width:55rpx;
					height: 55rpx;	
				}
				// 用户名称
				.username{	
					color: rgba(0, 0, 0, 0.7);
					// text-align: center;
					// text-shadow: 0px 4px 4.7px rgba(0, 0, 0, 0.25);
					font-family: "Noto Sans SC";
					font-size: 21rpx;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
				}
			}
			// 定义tab样式
			.tab{
				
				position: absolute;
				left:0;
				top:0;
				background: rgba(250,129,90,0.7);
				backdrop-filter: blur(20rpx);
				color: #fff;
				font-size: 22rpx;;
				padding: 6rpx 14rpx;
				border-radius: 20rpx;
				transform: scale(0.8);
				transform-origin: left top;
			}
			

		}
	}
	// 定义刷新和返回顶部
	.float{
		position:fixed;
		right:30rpx;
		bottom:80rpx;
		padding-bottom:env(safe-area-insert-bottom);
		.item{
			width:100rpx;
			height:100rpx;
			// background-color: rgba(255,255,255,0.7);
			display:flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 30rpx;
			border-radius: 50%;
			// border:2rpx soild #000;
			// box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(0, 0, 0, 0.6);
			background: linear-gradient(190deg, rgba(255, 184, 252, 0.65) 5.64%, rgba(227, 193, 182, 0.78) 31.2%, rgba(239, 222, 159, 0.32) 63.73%, #FFBEBE 93.52%);
				box-shadow: 0px 6px 3.1px 0px rgba(255, 251, 251, 0.25) inset, 0px -2px 7.2px 0px rgba(0, 0, 0, 0.25) inset, 0px -6px 4.4px 0px rgba(255, 255, 255, 0.25) inset;
			animation: floatAnimation 1.5s ease-in-out infinite, colorChange 5s ease-in-out infinite alternate;
		}
	}
	
}
/* 定义动画 */
@keyframes floatAnimation {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10rpx);
	}
	100% {
		transform: translateY(0);
	}
}

@keyframes colorChange {
	0%, 100% {
		background: linear-gradient(190deg, rgba(239, 222, 159, 0.32) 5.64%, #FFBEBE 31.2%, rgba(255, 184, 252, 0.65) 63.73%, rgba(227, 193, 182, 0.78) 93.52%);
	}
	50% {
		background: linear-gradient(190deg, rgba(239, 222, 159, 0.32) 5.64%, #FFBEBE 31.2%, rgba(255, 184, 252, 0.65) 63.73%, rgba(227, 193, 182, 0.78) 93.52%);
	}
}
</style>